<form class="layui-form" action="">
<div  data-toggle="distpicker" id="distpicker">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">省</label>
            <div class="layui-input-inline">
                <select class="form-control" name="picker_province"  lay-filter="province" id="picker_province"></select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">市</label>
            <div class="layui-input-inline">
                <select class="form-control" name="picker_city" lay-filter="city" id="picker_city"></select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">县/区</label>
            <div class="layui-input-inline">
                <select class="form-control" name="picker_district"   id="picker_district"></select>
            </div>
        </div>
    </div>
</div>
</form>
<script>
    var province = '{{$province}}';
    var city = '{{$city}}';
    var area = '{{$area}}';
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;
        form.on('select(province)', function(data){
            selectCity();
            form.render();
        });
        form.on('select(city)', function(data){
            selectArea();
            form.render();
        });
    });
    function selectCity(){
        var id = $("#picker_province  option:selected").val();
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: 'POST',
            url: "{{ URL::action('Api\AreaController@city')}}",
            data: {id:id},
            dataType: "json",
            async: false, //  同步开启  默认是true 关闭
            success: function (data) {
                var html = '';
                if(data.code == 200) {
                    $.each(data.data,function(k,v){
                        if(city == v.id) {
                            html += '<option value="'+v.id+'" selected >'+v.name+'</option>';
                        }else{
                            html += '<option value="'+v.id+'">'+v.name+'</option>';
                        }
                    });
                    $("#picker_city").html(html);
                    selectArea();
                }
            }
        });
    }
    function selectArea(){
        var id = $("#picker_city  option:selected").val();
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: 'POST',
            url: "{{ URL::action('Api\AreaController@area')}}",
            data: {id:id},
            dataType: "json",
            async: false, //  同步开启  默认是true 关闭
            success: function (data) {
                var html = '';
                if(data.code == 200) {
                    $.each(data.data,function(k,v){
                        if(area == v.id) {
                            html += '<option value="'+v.id+'" selected >'+v.name+'</option>';
                        }else{
                            html += '<option value="'+v.id+'">'+v.name+'</option>';
                        }
                    });
                    $("#picker_district").html(html);
                }
            }
        });
    }
    $(function(){
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: 'POST',
            url: "{{ URL::action('Api\AreaController@province')}}",
            data: {},
            dataType: "json",
            async: false, //  同步开启  默认是true 关闭
            success: function (data) {
                var html = '';
                if(data.code == 200) {
                    $.each(data.data,function(k,v){
                        if(province == v.id) {
                            html += '<option value="'+v.id+'" selected >'+v.name+'</option>';
                        }else{
                            html += '<option value="'+v.id+'">'+v.name+'</option>';
                        }
                    });
                    $("#picker_province").html(html);
                    selectCity();
                }
            }
        });
    })
</script>
